<template>
  <el-container>
    <el-header style="height:auto;">
      <div style="padding: 10px;">
      <el-page-header @back="goBack">
        <template slot="title">
          返回角色列表
        </template>
        <template slot="content">
          当前角色：{{ roleItem.roleName }}
        </template>
      </el-page-header>
      </div>
    </el-header>
    <el-main>
      <el-tabs>
        <el-tab-pane label="角色用户">
          <el-container>
            <el-main>
              <el-table height="100%" :data="userTable.result" border style="width: 100%" highlight-current-row>
                <el-table-column header-align="center" align="center" width="40" fixed="left">
                  <template slot="header">
                    <el-button type="text" icon="el-icon-plus" @click="showExclusionUsers = true" title="添加用户到该角色" ></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-close" @click="removeUser(scope.row)" title="从该角色用户列表中删除"></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="displayName" label="姓名" width="150"></el-table-column>
                <el-table-column prop="loginName" label="登录名" width="150"></el-table-column>
                <el-table-column prop="cellphone" label="手机号" width="200"></el-table-column>
                <el-table-column prop="secEmail" label="邮箱" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userStatus" label="用户状态" width="100">
                  <template slot-scope="scope">
                    {{ userStatus.singleOrDefault(t=>t.value == scope.row.userStatus).label }}
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer>
              <el-pagination v-on:current-change="getUsers" :current-page.sync="queryUsers.pageIndex" :page-size="queryUsers.pageSize" layout="total, prev, pager, next" :total="userTable.rowCount" ></el-pagination>
            </el-footer>
          </el-container>
        </el-tab-pane>
        <el-tab-pane label="模块权限">
          <el-container>
            <el-main>
              <el-table height="100%" :data="moduleTable.result" border style="width: 100%" highlight-current-row>
                <el-table-column header-align="center" align="center" width="40" fixed="left">
                  <template slot="header">
                    <el-button type="text" icon="el-icon-plus" @click="showExclusionModules = true" title="添加模块到该角色" ></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-close" @click="removeModule(scope.row)" title="从该角色模块列表中删除"></el-button>
                  </template>
                </el-table-column>
                <!-- <el-table-column type="expand" align="center" width="40" >
                  <template slot="header">
                    <el-button type="text" icon="el-icon-refresh" @click="getModules" title="刷新" ></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-table :data="scope.row.actions" border style="width: 95%; margin: auto;" highlight-current-row>
                      <el-table-column prop="actionName" label="功能名" width="150" show-overflow-tooltip></el-table-column>
                      <el-table-column prop="fullUri" label="功能全路径"  show-overflow-tooltip></el-table-column>
                      <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="200"></el-table-column>
                      <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="200"></el-table-column>
                    </el-table>
                  </template>
                </el-table-column> -->
                <el-table-column prop="icon" label="icon" width="50" header-align="center" align="center">
                  <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                  </template>
                </el-table-column>
                <el-table-column prop="moduleName" label="模块名" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="fullUri" label="全路径" min-width="300" show-overflow-tooltip></el-table-column>
                <el-table-column prop="label" label="标签" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="appId" label="应用程序代码" width="150" ></el-table-column>
                <el-table-column prop="isPublic" label="公开访问"  width="80" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button :type="scope.row.isPublic? 'success': 'info'" :icon="scope.row.isPublic? 'el-icon-check': 'el-icon-close'" circle></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="enabled" label="启用" width="80" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button :type="scope.row.enabled? 'success': 'info'" :icon="scope.row.enabled? 'el-icon-check': 'el-icon-close'" circle></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="150"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="150"></el-table-column>
              </el-table>
            </el-main>
            <el-footer>
              <el-pagination v-on:current-change="getModules" :current-page.sync="queryModules.pageIndex" :page-size="queryModules.pageSize" layout="total, prev, pager, next" :total="moduleTable.rowCount" ></el-pagination>
            </el-footer>
          </el-container>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="请选择用户" :visible.sync="showExclusionUsers" @opened="openUsers">
        <ExclusionUsers ref="exclusionUsers" :roleId="roleId" ></ExclusionUsers>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showExclusionUsers = false">取 消</el-button>
          <el-button type="primary" @click="addUsers">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="请选择模块" :visible.sync="showExclusionModules" @opened="openModules">
        <ExclusionModules ref="exclusionModules" :roleId="roleId" ></ExclusionModules>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showExclusionModules = false">取 消</el-button>
          <el-button type="primary" @click="addModules">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import {mapState} from 'vuex';
import ExclusionModules from './components/ExclusionModules.vue';
import ExclusionUsers from './components/ExclusionUsers.vue';
const STORE_MODULE = {
  "name": "user",
  "state": [
    "userStatus"
  ],
  "mutations": [  ],
  "actions": [  ]
};
export default {
  components:{
    ExclusionModules,
    ExclusionUsers
  },
  data() {
    return {
      roleId: null,
      roleItem: {
        roleId: null,
        roleName: null
      },
      showExclusionUsers: false,
      queryUsers: {
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          "userId": true,
        },
        parameters: {
          keyword: null,
          userStatus: null
        },
      },
      userTable:{
        result: [],
        pageIndex: 1,
        pageSize: 20,
        pageCount: 0,
        rowCount: 0
      },

      showExclusionModules: false,
      queryModules: {
        pageIndex: 1,
        pageSize: 20,
        sortFields: {
          "moduleId": true,
        },
        parameters: {
          keyword: null,
          appId: null
        },
      },
      moduleTable:{
        result: [],
        pageIndex: 1,
        pageSize: 20,
        pageCount: 0,
        rowCount: 0
      },
    }
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建":"编辑";
    }
  },
  created() {
    this.roleId = this.$route.params.id;
    this.$service.role.item({params:{id:this.roleId}}).then(r => {
      if (r.success) {
        this.roleItem = r.data;
        this.getUsers();
        this.getModules();
      }
    });
  },
  methods: {

    getUsers(){

      this.$service.role.inclusionUsers({params:{roleId: this.roleId}, data:this.queryUsers}).then(r =>{
        if (r.success){
          this.userTable = r.data;
        }
      });
    },
    openUsers(){
      this.$refs.exclusionUsers.query();
    },
    addUsers(){

      let items = this.$refs.exclusionUsers.getSelection();
      this.$service.role.addUsers({
        data: {roleId: this.roleId, users:items}
      }).then(r =>{
        if(r.success)
          this.getUsers();
      });

      this.showExclusionUsers = false;
    },
    removeUser(row){
      confirm('确认从角色用户中删除['+row.displayName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.$service.role.removeUsers({data: {roleId: this.roleId, users: [row.userId]}}).then((response) => {
          if (response.success) {
            this.getUsers();
          }
          else {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    getModules(){

      this.$service.role.inclusionModules({params:{roleId: this.roleId}, data:this.queryModules}).then(r =>{
        if (r.success){
          this.moduleTable = r.data;
        }
      });
    },
    openModules(){
      this.$refs.exclusionModules.query();
    },
    addModules(){
      let items = this.$refs.exclusionModules.getSelection();
      this.$service.role.addModules({
        data: {roleId: this.roleId, modules:items}
      }).then(r =>{
        if(r.success)
          this.getModules();
      });

      this.showExclusionModules = false;
    },
    removeModule(row){
      confirm('确认从角色模块中删除['+row.moduleName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.$service.role.removeModules({data: {roleId: this.roleId, modules: [row.moduleId]}}).then((response) => {
          if (response.success) {
            this.getModules();
          }
          else {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    goBack(){

      this.$router.push({name:'roleRoot'})
    }
  }
}
</script>
<style>
.el-tabs__content{
  height: calc( 100% - 60px);
}
</style>
